<template>
  <!--
   * @FileDescription: 该文件的描述信息
   * @author Sun Yan
   * @Date $
  -->
  <van-pull-refresh v-model="$$parent.refreshing"
                    :style="`min-height: ${refreshMinHeight}`"
                    :loosing-text="loosingText"
                    :pulling-text="pullingText"
                    :loading-text="loadingText"
                    :success-text="$$parent.endSuccessText"
                    success-duration="500"
                    :disabled="!refresh"
                    ref="refresh"
                    @refresh="$$parent.onRefreshInitList">
    <van-list
        v-if="($$parent[listName] || []).length"
        v-model="$$parent.loading"
        :finished="$$parent.finished"
        :finished-text="finishedText"
        :error.sync="$$parent.error"
        :error-text="errorText"
        @load="$$parent[onLoadName]"
        :immediate-check="false">
      <slot></slot>
    </van-list>
    <van-empty v-else-if="$$parent.finished" type="list" :description="description"/>
    <div style="padding-top: 11px" v-else-if="!$$parent.finished">
      <van-skeleton avatar :row="4" v-for="i in 6" :key="i"/>
    </div>
  </van-pull-refresh>
</template>
<script>
/**
 * @description:  van-pull-refresh and van-list and van-skeleton and van-empty 共同通用行二次封装 and van-pull-refresh parent DOM overflow-y auto 进入离开 记录位置处理
 * 引用 scrollParent(van-pull-refresh) 递归向上找滚动元素 注意点 如果 van-pull-refresh parent 没有给 固定高度 overflow auto 那么 他会一值向上找到 body or 滚动元素 来根据滚动位置记录待回到此组件 还原滚动位置 ，
 * @param {string} refresh
 * @param {string} refreshMinHeight
 * @param {string} listName
 * @param {string} onLoadName
 * @param {string} description
 * @param {string} errorText
 * @param {string} loosingText
 * @param {string} pullingText
 * @param {string} loadingText
 * @param {string} finishedText
 * @param {string} loadingText
 * @return void
 */
export default {
  name: "com-load-list",
  data() {
    return {
      scrollY: 0,
      scrollParentEl: '',
    }
  },
  created() {
    this.$$parent = new Object({});
    this.parentVm(this);
  },
  mounted() {
    this.scrollParent(this.$refs.refresh.$el);
    this.scrollParentEl.addEventListener("scroll", this.setScroll);
  },

  beforeDestroy() {
    this.scrollParentEl.removeEventListener("scroll", this.setScroll);
  },

  // 缓存进入
  activated() {
    console.log(this.scrollParentEl.className, this.scrollY, 'scrollY缓存进入')
    this.$nextTick(_ => {
      if (this.scrollParentEl) {
        this.scrollParentEl.scrollTop = this.scrollY;
      }
    })
  },

  // 缓存离开
  deactivated() {
    console.log(this.scrollParentEl.className, this.scrollY, 'scrollY缓存离开')
  },


  methods: {

    setScroll() {
      this.scrollY = this.scrollParentEl.scrollTop;
    },
    scrollParent(El) {
      try {
        if (window.getComputedStyle(El.parentElement).getPropertyValue("overflow-y") === 'auto'
            || window.getComputedStyle(El.parentElement).getPropertyValue("overflow-y") === 'scroll'
            || window.getComputedStyle(El.parentElement).getPropertyValue("overflow") === 'auto'
            || window.getComputedStyle(El.parentElement).getPropertyValue("overflow") === 'scroll'
        ) {
          this.scrollParentEl = El.parentElement;
          // console.log(this.scrollParentEl)
        } else {
          this.scrollParent(El.parentElement)
        }
      } catch (e) {
        this.scrollParentEl = window.document.body;
        // throw new Error('找不到 目标 parent el 滚动元素')
      }

    },
    parentVm(VmComponent) {
      try {
        if (typeof VmComponent.$parent.onLoad === 'function'
            && Object.prototype.toString.call(VmComponent.$parent.loading) === '[object Boolean]'
            && Object.prototype.toString.call(VmComponent.$parent.finished) === '[object Boolean]'
            && Object.prototype.toString.call(VmComponent.$parent[this.listName]) === '[object Array]') {
          this.$$parent = VmComponent.$parent;
        } else {
          this.parentVm(VmComponent.$parent)
        }
      } catch (e) {
        throw new Error('找不到 目标 VmComponent.$parent 该父组件必须具备 onLoad 方法 并且结合 list_page 乱混使用')
      }
    },
  },

  props: {
    scrollTopEl: {
      type: String | Boolean,
      default: '', // #id .class
    },
    refresh: {
      type: Boolean,
      default: false,
    },

    refreshMinHeight: {
      type: String,
      default: function () {
        return this.refresh ? 'calc(100vh - 2.66666rem)' : '50vh'
      },
    },

    listName: {
      type: String,
      default: 'list',
    },
    onLoadName: {
      type: String,
      default: 'onLoad',
    },
    description: {
      type: String,
      default: '暂无数据列表',
    },
    errorText: {
      type: String,
      default: '请求失败，点击重新加载',
    },
    loosingText: {
      type: String,
      default: '释放刷新',
    },

    pullingText: {
      type: String,
      default: '下拉刷新',
    },

    loadingText: {
      type: String,
      default: '努力加载中',
    },

    finishedText: {
      type: String,
      default: '没有更多了',
    },
  },
}
</script>
<style scoped>

</style>